<template>
  <div class="dashboard-container">
    <!-- 数据卡片 -->
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12" :lg="5">
        <el-card shadow="never">
          <template #header>
            <div class="flex-x-between">
              <span class="text-[var(--el-text-color-secondary)]">
                收益
              </span>
            </div>
          </template>

          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>今日未通过收益条数</span>
            <span>{{ info?.withdrawal?.day_err_withdrawal_count }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>今日未通过收益总额</span>
            <span>{{ info?.withdrawal?.day_err_withdrawal_price }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>今日未处理收益条数</span>
            <span>{{ info?.withdrawal?.day_not_withdrawal_count }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>今日未处理收益总额</span>
            <span>{{ info?.withdrawal?.day_not_withdrawal_price }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>今日已处理收益条数</span>
            <span>{{ info?.withdrawal?.day_yes_withdrawal_count }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>今日已处理收益总额</span>
            <span>{{ info?.withdrawal?.day_yes_withdrawal_price }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>累计未通过收益条数</span>
            <span>{{ info?.withdrawal?.err_withdrawal_count }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>累计未通过收益总额</span>
            <span>{{ info?.withdrawal?.err_withdrawal_price }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>累计未处理收益总和</span>
            <span>{{ info?.withdrawal?.not_withdrawal_count }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>累计未处理收益总额</span>
            <span>{{ info?.withdrawal?.not_withdrawal_price }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>本周未通过收益条数</span>
            <span>{{ info?.withdrawal?.week_err_withdrawal_count }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>本周未通过收益总额</span>
            <span>{{ info?.withdrawal?.week_err_withdrawal_price }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>本周未处理收益条数</span>
            <span>{{ info?.withdrawal?.week_not_withdrawal_count }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>本周未处理收益总额</span>
            <span>{{ info?.withdrawal?.week_not_withdrawal_price }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>本周已通过收益条数</span>
            <span>{{ info?.withdrawal?.week_yes_withdrawal_count }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>本周已通过收益总额</span>
            <span>{{ info?.withdrawal?.week_yes_withdrawal_price }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>累计通过收益条数</span>
            <span>{{ info?.withdrawal?.yes_withdrawal_count }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>累计通过收益总额</span>
            <span>{{ info?.withdrawal?.yes_withdrawal_price }}</span>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :lg="4">
        <el-card shadow="never">
          <template #header>
            <div class="flex-x-between">
              <span class="text-[var(--el-text-color-secondary)]">
                用户
              </span>
            </div>
          </template>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>今日注册用户</span>
            <span>{{ info?.user?.day_user }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>本周注册用户</span>
            <span>{{ info?.user?.week_user }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="5">
        <el-card shadow="never">
          <template #header>
            <div class="flex-x-between">
              <span class="text-[var(--el-text-color-secondary)]">
                项目库合伙人
              </span>
            </div>
          </template>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>今日发布项目库</span>
            <span>{{ info?.project?.day_project }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>未通过项目库</span>
            <span>{{ info?.project?.err_project }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>未处理项目库</span>
            <span>{{ info?.project?.not_project }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>已通过项目库</span>
            <span>{{ info?.project?.ok_project }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="5">
        <el-card shadow="never">
          <template #header>
            <div class="flex-x-between">
              <span class="text-[var(--el-text-color-secondary)]">
                人脉圈统计
              </span>
            </div>
          </template>

          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>今日发布人脉圈</span>
            <span>{{ info?.nwk?.day_nwk }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>未通过人脉圈发布</span>
            <span>{{ info?.nwk?.err_nwk }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>未处理人脉圈发布</span>
            <span>{{ info?.nwk?.not_nwk }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>已通过人脉圈发布审核</span>
            <span>{{ info?.nwk?.ok_nwk }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>本周发布人脉圈</span>
            <span>{{ info?.nwk?.week_nwk }}</span>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :lg="5">
        <el-card shadow="never">
          <template #header>
            <div class="flex-x-between">
              <span class="text-[var(--el-text-color-secondary)]">
                佣金
              </span>
            </div>
          </template>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>今日驳回佣金记录条数</span>
            <span>{{ info?.commission?.day_err_commission_count }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>今日驳回佣金总额</span>
            <span>{{ info?.commission?.day_err_commission_price }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>今日未处理佣金条数</span>
            <span>{{ info?.commission?.day_not_commission_count }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>今日未处理佣金总额</span>
            <span>{{ info?.commission?.day_not_commission_price }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>今日已通过佣金条数</span>
            <span>{{ info?.commission?.day_yes_commission_count }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>金融已通过佣金总额</span>
            <span>{{ info?.commission?.day_yes_commission_price }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>累计未通过佣金条数</span>
            <span>{{ info?.commission?.err_commission_count }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>累计未通过佣金总额</span>
            <span>{{ info?.commission?.err_commission_price }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>累计未处理佣金条数</span>
            <span>{{ info?.commission?.not_commission_count }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>累计未处理佣金总额</span>
            <span>{{ info?.commission?.not_commission_price }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>本周未通过佣金条数</span>
            <span>{{ info?.commission?.week_err_commission_count }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>本周未通过佣金总额</span>
            <span>{{ info?.commission?.week_err_commission_price }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>本周未处理佣金条数</span>
            <span>{{ info?.commission?.week_not_commission_count }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>本周未处理佣金总额</span>
            <span>{{ info?.commission?.week_not_commission_price }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>本周已处理佣金条数</span>
            <span>{{ info?.commission?.week_yes_commission_count }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>本周已处理佣金总额</span>
            <span>{{ info?.commission?.week_yes_commission_price }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>累计已处理佣金条数</span>
            <span>{{ info?.commission?.yes_commission_count }}</span>
          </div>
          <div class="flex-x-between mt-2 text-sm text-[var(--el-text-color-secondary)]">
            <span>累计已处理佣金总额</span>
            <span>{{ info?.commission?.yes_commission_price }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});

import router from "@/router";

import { useUserStore } from "@/store/modules/user";
import StatsAPI from "@/api/log";


const userStore = useUserStore();
const date: Date = new Date();
const greetings = computed(() => {
  const hours = date.getHours();
  if (hours >= 6 && hours < 8) {
    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
  } else if (hours >= 8 && hours < 12) {
    return "上午好，" + userStore.user.nickname + "！";
  } else if (hours >= 12 && hours < 18) {
    return "下午好，" + userStore.user.nickname + "！";
  } else if (hours >= 18 && hours < 24) {
    return "晚上好，" + userStore.user.nickname + "！";
  } else {
    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
  }
});

// 右上角数量
const statisticData = ref([
  {
    value: 99,
    iconClass: "message",
    title: "消息",
    key: "message",
  },
  {
    value: 50,
    iconClass: "todo",
    title: "待办",
    suffix: "/100",
    key: "upcoming",
  },
  {
    value: 10,
    iconClass: "project",
    title: "项目",
    key: "project",
  },
]);

const onlineUserCount = ref(0);

const visitStatsLoading = ref(true);
const visitStatsList = ref<VisitStats[] | null>(Array(3).fill({}));
interface VisitStats {
  title: string;
  icon: string;
  tagType: "primary" | "success" | "warning";
  growthRate: number;
  // 粒度
  granularity: string;
  // 今日数量
  todayCount: number;
  totalCount: number;
}
// 加载访问统计数据
const info = ref<any>({});
const loadVisitStatsData = async () => {
  const res = await StatsAPI.getIndexInfo();
  info.value = res;
};

onMounted(() => {
  loadVisitStatsData();
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 24px;

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: 0;
  }
}
</style>
